@extends('admin.layout')
@section('content')
    @if ($message = Session::get('success'))
        <div class="layui-card">
            <div class="layui-card-header">提示！</div>
            <div class="layui-card-body">
                <p>{{ $message }}</p>
            </div>
        </div>
    @endif
    <div class="layui-card">
        <div class="layui-card-header">
            <div  class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="title" value="" autocomplete="off" placeholder="请输入标题" class="layui-input"/>
                    </div>

                    <div class="layui-input-inline" style="width: 50px;">
                        <button class="layui-btn layui-btn-primary" id="searchBtn"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-btn-group">
                <a href="{{route('admin.category.create')}}" class="layui-btn"><i class="fa fa-plus-circle"></i> 添加数据</a>
                <a id="listDelete" class="layui-btn layui-btn-danger ajax-batch"><i class="fa fa-trash-o"></i> 批量删除</a>

            </div>

            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                        <a  class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                </div>
            </script>
            <script type="text/html" id="thumb">
                <a href="@{{d.thumb}}" target="_blank" title="点击查看"><img src="@{{d.thumb}}" alt="" width="28" height="28"></a>
            </script>
            <script type="text/html" id="tags">
                @{{#  layui.each(d.tags, function(index, item){ }}
                <button type="button" class="layui-btn layui-btn-sm">@{{ item.name }}</button>
                @{{# }); }}
            </script>
            <script type="text/html" id="category">
                @{{ d.category.name }}
            </script>


        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['table','form','layer','jquery'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;

            var token = $("meta[name='csrf-token']").attr('content');

            var dataTable = table.render({
                elem: '#dataTable'
                ,url: "{{ route('admin.category.data') }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true,fixed: true}
                    ,{field: 'id', title: 'ID', sort: true}
                    ,{field: 'title', title: '标题'}
                    ,{field: 'name', title: '名称'}
                    ,{field: 'type', title: '类型'}
                    ,{field: 'status', title: '状态'}
                    ,{field: 'remark', title: '备注'}
                    ,{fixed: 'right',  align:'center', toolbar: '#options'}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'del'){
                    layer.confirm('确认删除吗？', function(index){
                        $.post("{{route('admin.category.destroy')}}",{_method:'delete',ids:[data.id],_token:token},function (result) {
                            if (result.code==0){
                                obj.del(); //删除对应行（tr）的DOM结构
                            }
                            layer.close(index);
                            layer.msg(result.msg)
                        });
                    });
                } else if(layEvent === 'edit'){

                    location.href = '/admin/category/'+data.id+'/edit';
                }
            });

            //按钮批量删除
            $("#listDelete").click(function () {
                var ids = []
                var hasCheck = table.checkStatus('dataTable')
                var hasCheckData = hasCheck.data
                if (hasCheckData.length>0){
                    $.each(hasCheckData,function (index,element) {
                        ids.push(element.id)
                    })
                }


                console.log(ids);
                if (ids.length>0){
                    layer.confirm('确认删除吗？', function(index){
                        $.post("{{route('admin.category.destroy')}}",{_method:'delete',ids:ids,_token:token},function (result) {
                            console.log(result)
                            if (result.code==0){
                                dataTable.reload()
                            }
                            layer.close(index);
                            layer.msg(result.msg)
                        });
                    })
                }else {
                    layer.msg('请选择删除项')
                }
            })

            //搜索
            $("#searchBtn").click(function () {
                var title = $("#title").val();
                dataTable.reload({
                    where:{title:title},
                    page:{curr:1}
                })
            })
        });
    </script>
@endsection